import { type PropsOf, component$ } from '@builder.io/qwik';
import { cn } from '../cn';

type AvatarProps = PropsOf<'img'> & { sizing?: 'sm' | 'base' | 'lg' | undefined };

const SIDE_LEN = {
  sm: 24,
  base: 48,
  lg: 96,
};

export default component$<AvatarProps>((props) => {
  const sizing = props.sizing || 'base';
  const sideLen = SIDE_LEN[sizing];

  return <img {...props} width={sideLen} height={sideLen} class={cn(props.class, 'border-2 rounded-full border-kq-50 ring-2 ring-kq-300')} />;
});
